<template>
	<view>
		<view class="row itemTitle rowbetwwen pding25">
			<view class="w70">近45日是否有开票记录</view>
			<view class="w30 marginL16">{{ detailInfo.billingRecords ? '有' : '无' }}</view>
		</view>
		<view class="row pding25 rowbetwwen">
			<view class="w70">近30天开票金额</view>
			<view class="w30 marginL16">{{ detailInfo.billingDaysSum ? `${$p(detailInfo.billingDaysSum)}` : '-' }}
			</view>
		</view>

		<view class="row itemTitle pding25 rowbetwwen">
			<view class="w70">近12月作废发票数量占比</view>
			<view class="w30 marginL16">{{ detailInfo.taxVoidRateMonth12 ? `${detailInfo.taxVoidRateMonth12}%` : '-' }}
			</view>
		</view>
		<view class="row  pding25 rowbetwwen">
			<view class="w70">近12个月断票月数</view>
			<view class="w30 marginL16">{{ detailInfo.breakMonthsSum12 || '0' }}
			</view>
		</view>
		<view class="row itemTitle pding25 rowbetwwen">
			<view class="w70" style="width: 84%">近12个月月均开票金额同比增长率</view>
			<view class="w30 marginL16" v-if="detailInfo.taxAmountGrowthRateMonth12">
				{{ detailInfo.taxAmountGrowthRateMonth12 != 0 ? `${$p(detailInfo.taxAmountGrowthRateMonth12)}%` : '0' }}
			</view>
			<view class="w30 marginL16" v-else>
				{{ '-' }}
			</view>
		</view>
		<view class="row pding25 rowbetwwen">
			<view class="w70">最早开票时间</view>
			<view class="w30 marginL16">
				{{ detailInfo.earliestTime ? `${detailInfo.earliestTime}` : '-' }}
			</view>
		</view>
		<view class="row itemTitle pding25 rowbetwwen">
			<view class="w70">最晚开票时间</view>
			<view class="w30 marginL16">
				{{ detailInfo.latestTime ? getDateDiff(detailInfo.latestTime) : '-' }}
			</view>
		</view>

		<view class="row title rowStart" style="margin: 30rpx 0;">
			<view class="tcard"></view>
			<text style="font-weight: 500">近三年开票总金额</text>
		</view>
		<view class="taxTable" style="position:relative;">
			<view class="potrans" v-if="isDemo != ''">
				<image src="/pagesWater/static/waterLogo.png" style="width: 320rpx;height: 200rpx"></image>
			</view>
			<tableData :tableTitleData="arrobj">
				<view style="display: flex" class="data-row" v-for="(item, index) in objarr" :key="index">
					<view :style="{ width: (100 / objarr.length) + '%' }" class="data-cell">{{ item.month }}</view>
					<view :style="{ width: (100 / objarr.length) + '%' }" class="data-cell"
						v-for="(v, i) in arrobj.length - 1" :key="i">{{ $p(item['price' + (i + 1)]) }}</view>
				</view>
				<view class="emptySty" v-if="JSON.stringify(objarr) == '[]'">
					暂无数据
				</view>
			</tableData>
		</view>

		<view class="row title rowStart" style="margin: 20rpx 0;">
			<view class="tcard"></view>
			<text style="font-weight: 500">开票断票情况</text>
		</view>
		<view class="gr-card">
			<view>近12月最长连续断票月数</view>
			<view>{{ detailInfo.breakMonthsSum12 }}</view>
		</view>
		<view class="gr-card">
			<view>近12个月最大连续未开具发票间隔天数(销项)</view>
			<view>{{ detailInfo.taxOutputNotInvoicedMonth12 ? detailInfo.taxOutputNotInvoicedMonth12 : '-' }}</view>
		</view>
		<view class="gr-card">
			<view>最近开具发票间隔天数</view>
			<view>{{ detailInfo.recentBillingGapdays ? detailInfo.recentBillingGapdays : '-' }}</view>
		</view>

		<view class="uni-card  cardContent">
			<view class="row title">
				<view class="row rowStart">
					<view class="tcard">
					</view>
					<text style="font-weight: 500">开票对比分析</text>
				</view>
				<view class="row rowStart">
					<view style="width: 24rpx;height: 32rpx;margin-right: 10rpx">
						<image src="/pagesWater/static/rightMore.png" style="width: 100%;height: 100%"></image>
					</view>
					<view style="color: #999999;font-size: 26rpx">左滑查看更多</view>
				</view>
			</view>
		</view>

		<view class="taxclassTable" style="position: relative">
			<view class="potrans" v-if="isDemo != ''">
				<image src="/pagesWater/static/waterLogo.png" style="width: 320rpx;height: 200rpx"></image>
			</view>
			<tableData :tableType="'column'" :tableData="taxArr" :colWidth="'40'">
				<view style="display: flex; width: 100%; overflow: hidden;" class="data-cell-box"
					v-for="(item, index) in taxArr" :key="index">
					<!--<view :style="{width: (100 / taxArr.length) + '%'}" style="justify-content: flex-start;background: #F8F8F8;color:#555555;" class="data-cell">{{ item.month }}</view>-->
					<view :style="{
						width: (100 / taxArr.length) + '%',
						padding: index == 0 ? '28rpx 12rpx' : '20rpx 12rpx',
						background: index == 0 ? '#F1F5F9' : ''
					}" class="data-cell" v-for="(v, i) in taxArrobj.length - 1" :key="i">
						<view v-if="index == 0">
							{{ item["price" + (i + 1)] }}
						</view>
						<view v-else>
							<view v-if="item.month == '开票金额'">{{ $p(item['price' + (i + 1)]) }}</view>
							<view v-else-if="['开票环比增长率', '红冲发票张数占比', '红冲金额占比', '开票同比增长率'].includes(item.month)">
								<view v-if="item['price' + (i + 1)] == '0'"> 0 </view>
								<view v-else>{{ item['price' + (i + 1)] && item['price' + (i + 1)] != '-' ? $p(item['price' + (i + 1)]) + '%' : '-' }}</view>
							</view>
							<view v-else>{{ item['price' + (i + 1)] != '-' ? item['price' + (i + 1)] : '0' }}</view>
						</view>
					</view>
				</view>
				<view v-if="taxArr.length == 0"
					style="text-align: center;line-height: 100rpx;height: 100rpx;font-size: 26rpx;color: #888888">
					暂无数据
				</view>
			</tableData>
		</view>



	</view>
</template>

<script>
import {
	getReportDetailInvApi
} from '@/api/user'
import tableData from "@/components/tableData.vue";
export default {
	components: {
		tableData
	},
	props: {
		shareCode: {
			type: String,
			default: ''
		},
		taskId: {
			type: String,
			default: ''
		},
		isDemo: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			detailInfo: {}, // 数据
			arrobj: [{
				title: '月份'
			}],
			taxArrobj: [{
				title: '开票对比分析'
			}],
			taxArr: [],
			tableData: [],
			objarr: [],
		}
	},
	methods: {

		//判断两个日期是否是否是三年内
		getDateDiff(dateStr1) {
			const date1 = new Date(dateStr1);
			const date2 = new Date();
			const timeDiff = Math.abs(date2.getTime() - date1.getTime());
			const dayDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
			if (dayDiff > 365 * 3) {
				return '-'
			} else {
				return dateStr1
			}
		},

		getInfo() {
			uni.showLoading({
				title: '正在加载中'
			});
			let params = {
				shareCode: this.shareCode,
				taskId: this.taskId
			}
			getReportDetailInvApi(params).then(res => {
				this.detailInfo = res.data
				this.filterTableData()
			}).finally(() => {
				uni.hideLoading()
			})
		},

		filterTableData() {
			let val = this.detailInfo
			this.arrobj = [{
				title: '月份'
			}]
			this.taxArrobj = [{
				title: '开票对比分析'
			}]
			val.invoiceInfoDataList.forEach((item, index) => {
				this.arrobj.push({
					title: item.year + '年'
				})
			})
			val.enterpriseMonthApplyList.forEach((item, index) => {
				this.taxArrobj.push({
					title: `近${item.month}个月`
				})
			})
			this.taxArr = []
			val.enterpriseMonthApplyList.forEach(item => {
				item.monthData = [{
					name: '开票金额',
					value: item.taxEnterpriseApplyDate.invoiceAmount
				},
				{
					name: '开票环比增长率',
					value: item.taxEnterpriseApplyDate.invoiceGrowthRate
				},
				{
					name: '开票同比增长率',
					value: item.taxEnterpriseApplyDate.invoiceOverGrowthRate
				},
				{
					name: '开票张数',
					value: item.taxEnterpriseApplyDate.invoiceCount
				},
				{
					name: '开票月数',
					value: item.taxEnterpriseApplyDate.invoiceMonthsNum
				},
				{
					name: '红冲发票张数占比',
					value: item.taxEnterpriseApplyDate.invoiceRedCountRate
				},
				{
					name: '红冲金额占比',
					value: item.taxEnterpriseApplyDate.invoiceRedAmountRate
				},
				{
					name: '上游客户数量',
					value: item.taxEnterpriseApplyDate.customerUpNum
				},
				{
					name: '下游客户数量',
					value: item.taxEnterpriseApplyDate.customerDownNum
				},
					// { name: '无票收入', value: item.taxEnterpriseApplyDate.salesRevenueAmount },
				];
			})
			this.taxArr = this.$util.transformData(val.enterpriseMonthApplyList, 'F')
			this.taxArr.unshift({})
			this.taxArr[0].month = '开票对比分析'

			val.enterpriseMonthApplyList.forEach((item, i) => {
				this.taxArr[0][`price${i + 1}`] = `近${item.month}个月`
			})

			this.$nextTick(() => {
				if (Object.keys(val).length > 0 && (this.taskId || this.shareCode)) {
					this.tableData = val.invoiceInfoDataList
					this.addTableSum(this.tableData)
				}
			})
		},
		addTableSum(table) {
			table.forEach(item => {
				if (item.monthData.length < 12) {
					item.monthData.push({
						name: item.monthData.length + (12 - item.monthData.length)
					})
				}
			})
			table && table.forEach(item => {
				item.monthData.push({
					name: '合计',
					type: 0,
					value: item.total || 0
				})
			})
			this.objarr = this.$util.transformData(table)
		},

	},
	created() {
		if (!this.taskId && !this.shareCode) {
			// this.invoiceList = invoiceList.data
		} else {
			this.getInfo()
		}

	}
}
</script>

<style lang="scss" scoped>
.gr-card {
	background-color: rgb(248, 248, 248);
	padding: 20rpx;
	margin-bottom: 20rpx;

	>view {
		&:nth-child(2) {
			margin-top: 10rpx;
		}
	}
}

.pding25 {
	padding: 25rpx 0 !important;
}

.rowStart {
	justify-content: flex-start
}

.rowbetwwen {
	justify-content: space-between;
	padding: 30rpx !important;
}

.potrans {
	position: absolute;
	z-index: 9;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%)
}

.emptySty {
	text-align: center;
	line-height: 100rpx;
	height: 100rpx;
	font-size: 26rpx;
	color: #888888
}

.tcard {
	width: 5px;
	height: 18px;
	border-radius: 8rpx;
	background: #488AFD;
	margin-right: 20rpx
}

.w70 {
	// width: 55%;
	text-align: left;
	font-size: 28rpx;
	color: #999999;
	white-space: nowrap;
}

.w30 {
	// width: 55%;
	text-align: right;
	font-size: 28rpx;
	color: #222222;
	font-weight: 500;
	//white-space: nowrap;
}

.marginL16 {
	margin-left: 16rpx
}

.itemTitle {
	background: #F1F5F9;
	color: #a8a8a8;
	margin-top: 10rpx;
	margin-bottom: 10rpx;
	padding: 10rpx 16rpx;
}

.cardContent {
	box-shadow: none;
	padding-top: 20rpx;
	//padding-bottom: 20rpx;
	border-radius: 0 0 15rpx 15rpx;
	margin-top: 0;

	.tagContent {
		background: #D3E3FE;
		line-height: 80rpx;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		font-weight: 500;

		.tagStyle {
			width: 50%;
			height: 80rpx;
			text-align: center;
		}

		.active {
			color: #FFFFFF;
			background: #488AFD;
			border-radius: 16rpx;
		}
	}
}

/deep/ .table-container {
	border-radius: 20rpx;
	overflow: hidden;
}

/deep/ .data-cell {
	padding: 20rpx 12rpx;
}
</style>
